/* Copyright (C) 2021 minglong@iscas.ac.cn
* 
* Apache License Version 2.0许可头：
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* 
*    http://www.apache.org/licenses/LICENSE-2.0
* 
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
<template>
  <el-row :gutter="24">
    <el-col :span="24" style="min-height: 450px">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="入门级" name="class_a" >
            <app-dev-knowledge-table v-bind:data-source="dataL1" />
          </el-tab-pane>
          <el-tab-pane label="初级" name="class_ab">
            <app-dev-knowledge-table v-bind:data-source="dataL2" />
          </el-tab-pane>
          <el-tab-pane label="中级" name="class_b">
            <app-dev-knowledge-table v-bind:data-source="dataL3" />
          </el-tab-pane>
          <el-tab-pane label="高级" name="class_c">
            <app-dev-knowledge-table v-bind:data-source="dataL4" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import AppDevKnowledgeTable from "./AppDevKnowledgeTable.vue";
export default {
  components: { AppDevKnowledgeTable },
  data() {
    return {
      activeName: "class_a",
      dataL1: [
        { ha2: "分布式亲子教育", hd2: 1 },// url: "https://playground.harmonyos.com/#/cn/onlineDemo/demo/education", hd2: 1 },
        { ha2: "To-Do List", hd2: 1 },// url: "https://playground.harmonyos.com/#/cn/onlineDemo/demo/todolist", hd2: 1 },
        { ha2: "联系人", hd2: 1 },// url: "https://playground.harmonyos.com/#/cn/onlineDemo/demo/contact" , hd2: 1 },
        { ha2: "跨设备搜索", hd2: 1 },// url: "https://playground.harmonyos.com/#/cn/onlineDemo/demo/crossDeviceSearch", hd2: 1 },
        { ha2: "分布式日程", hd2: 1 },// url: "https://playground.harmonyos.com/#/cn/onlineDemo/demo/schedule", hd2: 1 },
        { ha2: "AI文字识别", hd2: 1 },// url: "https://playground.harmonyos.com/#/cn/onlineDemo/demo/searchImage", hd2: 1 },
      ],
      dataL2: [
        { ha2: "AnimationDemo", url: "https://gitee.com/openharmony/codelabs/tree/master/AnimationDemo" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "ClickableJsDemo", url: "https://gitee.com/openharmony/codelabs/tree/master/ClickableJsDemo" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "DialogDemo", url: "https://gitee.com/openharmony/codelabs/tree/master/DialogDemo" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "ImageEditorTemplate", url: "https://gitee.com/openharmony/codelabs/tree/master/ImageEditorTemplate" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "ImageJsDemo", url: "https://gitee.com/openharmony/codelabs/tree/master/ImageJsDemo" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "InputApplication", url: "https://gitee.com/openharmony/codelabs/tree/master/InputApplication" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "JSCanvasComponent", url: "https://gitee.com/openharmony/codelabs/tree/master/JSCanvasComponet" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "NewsClientOpenHarmony", url: "https://gitee.com/openharmony/codelabs/tree/master/NewsClientOpenHarmony" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "NewsDemo", url: "https://gitee.com/openharmony/codelabs/tree/master/NewsDemo" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "PictureGameOpenHarmony", url: "https://gitee.com/openharmony/codelabs/tree/master/PictureGameOpenHarmony" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "RatingApplication", url: "https://gitee.com/openharmony/codelabs/tree/master/RatingApplication" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "ShoppingOpenHarmony", url: "https://gitee.com/openharmony/codelabs/tree/master/ShoppingOpenHarmony" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "SliderApplication", url: "https://gitee.com/openharmony/codelabs/tree/master/SliderApplication" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "To-Do List", url: "https://gitee.com/openharmony-sig/knowledge_demo_smart_home/tree/master/FA/TodoList" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "联系人", url: "https://gitee.com/openharmony-sig/knowledge_demo_smart_home/tree/master/FA/Contacts" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "SwitchApplication", url: "https://gitee.com/openharmony/codelabs/tree/master/SwitchApplication" , hc2: 1, hc3: 1, hd2: 1},
      ],
      dataL3: [
        { ha2: "VideoOpenHarmony", url: "https://gitee.com/openharmony/codelabs/tree/master/VideoOpenHarmony" , hc2: 1, hc3: 1, hd2: 1, he1: 1},
        { ha2: "RemoteStartFA", url: "https://gitee.com/openharmony/codelabs/tree/master/RemoteStartFA" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "数字管家", url: "https://gitee.com/openharmony-sig/knowledge_demo_smart_home" , hc2: 1, hc3: 1, hd2: 1},
        { ha2: "Database", url: "https://gitee.com/openharmony/codelabs/tree/master/Database" , hc2: 1, hc3: 1, hd2: 1},
      ],
      dataL4: [{ ha2: "分布式音乐播放" }],
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    }
  },
};
</script>
<style>
.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
}
</style>
